import * as echarts from 'echarts/core';
import {
    BarChart,
    LineChart,
    PieChart,
    FunnelChart,
		RadarChart
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    MarkPointComponent,
    DatasetComponent,
    LegendScrollComponent,
    MarkAreaComponent
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent,LegendComponent,MarkLineComponent,MarkPointComponent,DatasetComponent,LegendScrollComponent,MarkAreaComponent,
    BarChart,LineChart,PieChart,FunnelChart,RadarChart,
    CanvasRenderer]
);



let defaultOptions={
    title:{
      text: 'Referer of a Website',
      show:false,
      textStyle:{
        color:'#333',
        fontSize:14,
        fontWeight:'normal'
      },
      subtext: 'Fake Data',
      subtextStyle:{
        color:'#aaa',
        fontSize:12,
        fontWeight:'normal'
      },
      left: 'center'
    },
    color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#e4a785'],
    tooltip: {
      show:true,
      trigger: 'axis',//雷达图 需要改为 item
      axisPointer:{
        type:'line'
      },
      textStyle:{
        color:'#333',
        fontSize:14,
        fontWeight:'normal'
      },
      triggerOn:'mousemove|click',
      confine:true,
      backgroundColor:'#ffffff',
      order:'seriesAsc'
    },
    legend: {
      show:true,
      type:'plain',
      orient: 'horizontal',
      left: 'left',
      itemGap:10,//图例间隔
      selected:{},//部分图例选中
      icon:'rect',
      top:'top',
    },
    series: [],
    jumpTo:{
      jump:'',//无操作
      jumpPage:'',//内部页面
      jumpPageName:'',
      jumpPageParam:'',//内部页面参数
      jumpExpress:'',//外部页面的表达式
    }
}
let funnelSeries={
  defaultLegend:"",
  name:'Access From',
  type:'funnel',
  left:80,
  top:60,
  right:80,
  bottom:60,
  minSize:'0%',//数据最小值min映射的宽度
  minSizeValue:0,
  maxSizeValue:100,
  maxSize:'100%',//数据最小值max映射的宽度
  orient:'vertical',//漏斗图朝向vertical、horizontal
  sort:'descending',//数据排序， 可以取 'ascending'，'descending'，'none'（表示按 data 顺序）
  gap:0,//数据图形间距
  funnelAlign:'center',//水平方向对齐布局类型，默认居中对齐，可用选项还有：'left' | 'right' | 'center'
  label:{//标签
    show:true,//是否显示标签
    color:null,
    position:'outside',//位置
    fontSize:12,
    fontWeight:'normal',//字体粗细
    width:100,
    overflow: "none",
    formatter:"{c}",//真实有用的
    formatterText:"{c}",//必须，备份用的
    formatterValue:'1'//1:不设置  2：自定义
  },
  labelLine:{
    show:false,
    length:10,
    lineStyle: {
        width: 1,
        type: 'solid'
      }
  },
  emphasis: {//在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
    focus: 'none'//'series' 聚焦当前高亮的数据所在的系列的所有图形,--->去掉后面的这个属性吧=》'self' 只聚焦（不淡出）当前高亮的数据的图形。none 不淡出其它图形，默认使用该配置
  },
  polymerization:'',//支持聚合操作
  dataSort:'',//支持数据排序
  encodeTemp:{temp_x:'name',temp_y:'value',group:''},
  encode: {
    itemName: 'name',
    value: 'value',
  },
}
//饼图的series配置
let pieSeries={
	defaultLegend:"",//图例是否显示
    name: 'Access From',
    type: 'pie',
    radius: ['0%', '50%'],
    radiusInnerValue:0,
    radiusOuterValue:50,
    polymerization:'',//支持聚合操作
    dataSort:'',//支持数据排序
    encodeTemp:{temp_x:'name',temp_y:'value',group:''},
    encode: {
      itemName: 'name',
      value: 'value',
    },
    label:{//标签
      show:true,//是否显示标签
      color:null,
      position:'outside',//位置
      fontSize:12,
      fontWeight:'normal',//字体粗细
      width:100,
      overflow: "none",
      formatter:"{c}",//真实有用的
      formatterText:"{c}",//必须，备份用的
      formatterValue:'1'//1:不设置  2：自定义
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
}
//雷达图的坐标系基础配置
let _radar={
	center: ["50%", "55%"],//默认在中间位置
	centerX:50,
	centerY:55,
	radius:["0%","75%"],//坐标系的大小
	radiusInnerValue:0,
	radiusOuterValue:75,
	axisName:{//雷达图每个指示器名称的配置项
		show:true,
		color:null,
		fontSize:12,
	},
	nameGap:15,//指示器名称和指示器轴的距离
	splitNumber:5,//指示器轴的分割段数
	shape:'polygon',//雷达图绘制类型，支持 'polygon' 和 'circle'
	axisLine:{//坐标轴轴线设置
      show:true,
      lineStyle:{//轴线的样式
        color:'rgba(51, 51, 51, 0.3)',
        width:1,
        type:'solid',//solid,dashed,dotted
      }
  },
	splitArea:{
	      areaStyle:{
	        color:["#fefefe","#f6f8fc"]//默认背景颜色
	      }
	},
	axisLabel:{//坐标轴的标签
	    show:false,
	    color:null,
	    fontSize:12,
	},
	indicator:[]// { name: '1111', max: 6500 },这里根据分类依据，自动赋值展示
}
//雷达图的series配置
let radarSeries={
	  defaultLegend:"",//图例是否显示
    name: 'Access From',
    type: 'radar',
    polymerization:'',//支持聚合操作
    dataSort:'',//支持数据排序
    encodeTemp:{temp_x:'name',temp_y:'value',group:'',max:'',maxIndicatorValue:''},
    encode: {
      itemName: 'name',
      value: 'value',
    },
	symbol:'emptyCircle',//点形状
	symbolSize:4,//形状大小
	symbolRotate:0,//旋转的角度
    label:{//每个点上的标签
      show:false,//是否显示标签
      color:null,
      position:'outside',//位置
      fontSize:12,
      fontWeight:'normal',//字体粗细
      width:100,
      overflow: "none",
      formatter:"{c}",//真实有用的
      formatterText:"{c}",//必须，备份用的
      formatterValue:'1'//1:不设置  2：自定义
    },
		itemStyle:{//折线拐点标志的样式
		  color:null,
		  borderColor:null,
		  borderWidth:0,//是否有描边
		},
		lineStyle:{//折线线条样式
		  color:null,//线条的颜色
		  width:2,
		  type:'solid',//折线的样式--'solid''dashed''dotted'
		  shadowBlur:0,//阴影的大小
		  shadowColor:null,//阴影的颜色
		}
}
//针对柱形图，折线图，散点图的series配置
let _series={
	defaultLegend:"",
  //----------------------------------------------------------------------------------------柱形图，折线上的特殊样式--------------------------------------------------------------
  name: '系列名称',
  type: 'line',//默认值
  xAxisIndex:0,//数据在x1轴，x2轴
  yAxisIndex:0,//数据在y1轴，y2轴
  polymerization:'',//支持聚合操作
  stack:'',//数据堆叠
  label:{//标签：折线上的点，柱形图中的数字
    show:false,//是否显示标签（折线上显示出数字）
    color:null,
    position:'top',//位置
    distance:5,//距离图形元素的距离--和position的位置搭配使用
    rotate:0,//标签旋转。从 -90 度到 90 度
    fontSize:12,
  },
  itemStyle:{//折线拐点标志的样式，柱子的样式
    color:null,
    borderColor:null,
    borderWidth:0,//是否有描边
  },
  emphasis: {//在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
    focus: 'none'//'series' 聚焦当前高亮的数据所在的系列的所有图形,--->去掉后面的这个属性吧=》'self' 只聚焦（不淡出）当前高亮的数据的图形。none 不淡出其它图形，默认使用该配置
  },

  // markPoint:{//标注--默认几组效果用于选择
  //   data:[],//类型 min,max,average
  // },
  // markLine:{//默认几组效果用于选择
  //   data:[]
  // },
  dataSort:'',//支持数据排序
  encodeTemp:{temp_x:'name',temp_y:'value',group:''},
  encode:{x:'name',y:'value',},//指定x,y的数据指向情况,这里涉及到条形图，正好相反 y是类别，x是数字
  //--------------------------------------------------------------------------------------------柱形图上的特殊样式--------------------------------------------------------------
  barWidth:0,//支持百分比或数值，规定用数值
  barMaxWidth:40,//柱子最大宽度
  barMinWidth:0,//柱子最小宽度
  //--------------------------------------------------------------------------------------------折线上的特殊样式--------------------------------------------------------------
  symbol:'emptyCircle',//折线上的形状
  symbolSize:4,//形状的大小
  connectNulls:false,//是否连接空数据
  step:false,//true,false,是否是阶梯图，支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯
  lineStyle:{//线条样式
    color:null,//线条的颜色
    width:2,
    type:'solid',//折线的样式--'solid''dashed''dotted'
    shadowBlur:0,//阴影的大小
    shadowColor:null,//阴影的颜色
  },
  areaStyle:{//区域填充样式。设置后显示成区域面积图
    opacity:0,//图形透明度。支持从 0 到 1 的数字。透明度为0 不绘制
    color:null,
    origin:'auto',//auto,start,end
  },
  smooth:false,//是否平滑
}
//grid的配置
let _grid={
    show:false,//是否显示直角坐标系网格
    backgroundColor:'transparent',
    backgroundColorValue:null,
    left:'10%',
    top:'15%',
    right:'5%',
    bottom:'10%',
    leftValue:10,
    topValue:15,
    rightValue:5,
    bottomValue:10,
    containLabel:false,//整个包含了标签的内容的距离
}
//x轴的配置
let _xAxis={
    show:true,
    gridIndex:0,
    type:'category',//value,category,time,log
    name:'',//坐标轴的名称
    nameGap:15,
    // position:'bottom',
    inverse:false,//反向坐标轴
    boundaryGap:true,//两边的留白策略
    axisLine:{//坐标轴轴线设置
      show:true,
      onZero:true,
      lineStyle:{//轴线的样式
        color:'#333',
        width:1,
        type:'solid',//solid,dashed,dotted
      }
    },
    axisTick:{//坐标轴的刻度
        show:true,
        alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
    },
    axisLabel:{//坐标轴的标签
        show:true,
        rotate:0,
        color:null,
        fontSize:12,
        fontLength:0,//默认显示6个字
    },
    splitLine:{//分割线
      show:false,
      lineStyle:{
        color:null,
        width:1,
        type:'solid'
      }
    },
}
//y轴的配置
let _yAxis={
  show:true,
  gridIndex:0,
  type:'value',//value,category,time,log
  name:'',//坐标轴的名称
  nameGap:15,//坐标轴名称与轴线之间的距离
  // position:'left',
  inverse:false,//反向坐标轴
  boundaryGap:true,//两边的留白策略
  axisLine:{//坐标轴轴线设置
    show:false,
    onZero:true,
    lineStyle:{//轴线的样式
      color:'#333',
      width:1,
      type:'solid',//solid,dashed,dotted
    }
  },
  axisTick:{//坐标轴的刻度
      show:false,
      alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
  },
  axisLabel:{//坐标轴的标签
      show:true,
      rotate:0,
      color:'#000000',
      fontSize:12,
      fontLength:0,//默认显示6个字
  },
  splitLine:{//分割线
    show:true,
    lineStyle:{
      color:'#ccc',
      width:1,
      type:'solid'
    }
  },
}
let _dataset={
  source:[
    { value: 1048, name: 'Search Engine',UUID:1},
    { value: 735, name: 'Direct' ,UUID:2},
    { value: 580, name: 'Email' ,UUID:3},
    { value: 484, name: 'Union Ads' ,UUID:4},
    { value: 300, name: 'Video Ads' ,UUID:5}
  ]
}
function getDefault(){
  debugger
  let _options=JSON.parse(JSON.stringify(defaultOptions))
  _options['grid']= JSON.parse(JSON.stringify(_grid))
  _options['xAxis']=[JSON.parse(JSON.stringify(_xAxis))]
  _options['yAxis']=[JSON.parse(JSON.stringify(_yAxis))]
  _options['dataset']=_dataset
  return _options
}
function getLine(){
  let _line=getDefault()
  let _line_series=JSON.parse(JSON.stringify(_series))
  _line['series'].push(Object.assign(_line_series,{type:'line',name:'折线图'}))
  return _line
}
function getBar(){
  let _bar=getDefault()
  let _bar_series=JSON.parse(JSON.stringify(_series))
  _bar['series'].push(Object.assign(_bar_series,{type:'bar',name:'柱形图'}))
  return _bar
}
function getMix(){
  let _mix=getBar()
  let _bar_series=JSON.parse(JSON.stringify(_series))
  _mix['series'].push(Object.assign(_bar_series,{type:'line',name:'折线图'}))
  return _mix
}
function getPie(){
  let _options=JSON.parse(JSON.stringify(defaultOptions))
  let _pie_series=JSON.parse(JSON.stringify(pieSeries))
  _options["tooltip"]["trigger"]="item"
  _options["tooltip"]["axisPointer"]["type"]="none"
  _options["legend"]["orient"]="vertical"
  _options['dataset']=_dataset
  _options['series'].push(_pie_series)
  return _options
}
function getRadar(){
  let _options=JSON.parse(JSON.stringify(defaultOptions))
  let _radar_series=JSON.parse(JSON.stringify(radarSeries))
  _options["tooltip"]["trigger"]="item"
  _options["tooltip"]["axisPointer"]["type"]="none"
  _options["legend"]["orient"]="vertical"
  _options['dataset']=_dataset
  _options['radar']=JSON.parse(JSON.stringify(_radar))
  _options['series'].push(_radar_series)
  return _options
}
function getFunnel(){
  let _options=JSON.parse(JSON.stringify(defaultOptions))
  let _funnel_series=JSON.parse(JSON.stringify(funnelSeries))
  _options["tooltip"]["trigger"]="item"
  _options["tooltip"]["axisPointer"]["type"]="none"
  _options["legend"]["orient"]="vertical"
  _options['dataset']=_dataset
  _options['series'].push(_funnel_series)
  return _options
}
function getStrip(){
  let _bar=getDefault()
  let _bar_series=JSON.parse(JSON.stringify(_series))
  _bar['xAxis']=[JSON.parse(JSON.stringify(_yAxis))]
  _bar['yAxis']=[JSON.parse(JSON.stringify(_xAxis))]
  _bar['series'].push(Object.assign(_bar_series,{type:'bar',name:'条形图',encodeTemp:{temp_x:'value',temp_y:'name'},encode:{x:'value',y:'name'}}))
  return _bar
}
function getList(){
  return  _dataset.source
}
function getStructure(type,echartType){
  let _obj={}
  switch(type){
    case 'xaxis':
      _obj= _xAxis
    break;
    case 'yaxis':
      _obj= _yAxis
    break;
    case 'series':
      _obj=echartType=='radar'?radarSeries : _series
    break;
  }
  return JSON.parse(JSON.stringify(_obj))
}
Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
function formatTime(date,type){
  let _format=''
  switch(type){
    case '1':
    _format='yyyy'
    break;
    case '2':
    _format='yyyy-MM'
    break;
    case '3':
    _format='yyyy-MM-dd'
    break;
    case '4':
    _format='yyyy-MM-dd hh:00'
    break;
    case '5':
    _format='yyyy-MM-dd hh:mm'
    break;
    case '6':
    _format='yyyy-MM-dd hh:mm:ss'
    break;
  }
  return new Date(date).format(_format)
}

export {
  getRadar,getLine,getBar,getMix,getPie,getList,getStructure,getStrip,formatTime,echarts,getFunnel
}
